<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五子棋游戏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #cvs {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            box-shadow: 5px 5px 15px 10px #333;
        }
    </style>
</head>
<body>
<canvas id="cvs" width="450" height="450"></canvas>
<script type="text/javascript">

    //获取到画板
    var cvs = document.getElementById('cvs');
    //获取上下文
    var ctx = cvs.getContext("2d");

    init();//游戏的初始化

    var G = {
        black: true
    };

    //1、画棋盘 15行 15列，每行30像素，每列30像素
    function drawPlaint() {
        //循环画出行和列的直线
        for (var i = 0; i < 15; i++) {
            var x1 = 15, x2 = 435, y = 15 + i * 30;
            ctx.strokeStyle = '#666'
            //画出行
            ctx.moveTo(x1, y);
            ctx.lineTo(x2, y);
            ctx.stroke();
            //画出列
            ctx.moveTo(y, x1);
            ctx.lineTo(y, x2);
            ctx.stroke();
        }
    }
    drawPlaint();

    //2、画棋子，棋子在行列线的交叉处
    function drawZi(x, y, black) {
        x = x * 30 + 15;
        y = y * 30 + 15;
        ctx.beginPath();
        ctx.arc(x, y, 13, 0, 2 * Math.PI);
        ctx.closePath();
        if (black) {
            ctx.fillStyle = "#333";
        } else {
            ctx.fillStyle = "#eee";
            ctx.lineWidth = 2;
            ctx.strokeStyle = "#333";
            ctx.stroke();
        }
        ctx.fill();
    }
    drawZi(false);

    function init() {//游戏的初始化
        var points=[];
        var fangAns=[];
        function Point(x,y) {
            this.x=x;
            this.y=y;
            this.state=0;//0表示没子，1表示黑子，2表示白子
        }

        function FangAn(){
            this.points=[];
            this.step=0;
            this.state=0;//0表示没子，1表示全是黑子，2表示全是白子，3表示黑子和白子都有
            this.add=function(x,y){
                var point=points[x][y];
                this.points.push(point);
            }
        }


        for(var i=0;i<15;i++){
            points[i]=[];
            for(var j=0;j<15;j++){
                points[i][j]=new Point(i,j);//将所有的点存到二维数组中

            }
        }

        //添加 列 方案
        var temp=null;
        for(var x=0;x<15;x++){
            for(var y=0;y<11;y++){
                temp=new FangAn();
                for(var k=0;k<5;k++){
                    temp.add(x,y+k);
                }
                fangAns.push(temp);
            }
        }
        //添加 行 方案
        for(var x=0;x<15;x++){
            for(var y=0;y<11;y++){
                temp=new FangAn();
                for(var k=0;k<5;k++){
                    temp.add(y+k,x);
                }
                fangAns.push(temp);
            }
        }
        //添加 斜 方案
        for(var x=0;x<11;x++){
            for(var y=0;y<11;y++){
                temp=new FangAn();
                for(var k=0;k<5;k++){
                    temp.add(x+k,y+k);
                }
                fangAns.push(temp);
            }
        }
        //添加 反斜 方案
        for(var x=14;x>3;x--){
            for(var y=0;y<11;y++){
                temp=new FangAn();
                for(var k=0;k<5;k++){
                    temp.add(x-k,y+k);
                }
                fangAns.push(temp);
            }
        }


        window.points=points;//变成了全局变量
        window.fangAns=fangAns;


    }
    //3、用户点击棋盘，画出相应的棋子，棋子要求黑白间隔
    cvs.onclick = function (e) {
        var x = e.offsetX;
        var y = e.offsetY;
        x = Math.floor(x / 30);//算出棋子在第几列
        y = Math.floor(y / 30);//算出棋子在第几行
        if (!hasZi(x, y)) {
            drawZi(x, y, (G.black = !G.black));//棋子在行列交叉处
            points[x][y].state= G.black?1:2;//黑子为1，白子为2
        }
    }
    function hasZi(x, y) {
        return points[x][y].state !=0;
    }

    //4、判断输赢  满足一行、一列、斜线或反斜线都表示赢了，赢了之后要显示赢家的颜色，棋盘不能再下棋
    //5、实现一个算法陪伴玩家下棋


</script>
</body>
</html>